<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历练习</title>
    <link rel="stylesheet" href="../js/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../js/fullcalendar/fullcalendar.print.min.css" media="print">
    <link rel="stylesheet" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="../js/moment.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/locale-all.js"></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>

    <script >
        $(document).ready(function() {
            $('#EventDialog').dialog({
                        title: '对话框',
                        width: 400,
                        height: 200,
                        closed: true,
                        cache: false,
                        modal: true,
                        buttons:[{
                            text:'保存',
                            handler:function(){
                                var EvenData={
                                        title: $('#EvenTitle').val(),
                                        content:$('#EvenCentent').val(),
                                        start: $('#EvenStart').datetimebox('getValue'),
                                        end:   $('#EvenEnd').datetimebox('getValue')
                                };
                                $('#calendar').fullCalendar('renderEvent', EvenData, true); // stick? = true
                                $('#calendar').fullCalendar('unselect');

                                $.post("/htqoa/event/save",EvenData,function(data){
                                    if((data.event)==null){
                                        $('#EventDialog').dialog("close");
                                    }
                                })
                            }
                        },{
                            text:'关闭',
                            handler:function(){
                                $('#EventDialog').dialog("close");
                            }
                        }]

                    }
            );
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: '2016-12-12',
                navLinks: true, // can click day/week names to navigate views
                locale:'zh-cn',
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                    $('#EventDialog').dialog("open");
                },
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events:'/htqoa/event/list'
            });
            $('#calendar').fullCalendar('option', 'timezone', 'local');

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div id='calendar'></div>
<div id="EventDialog">
    事件标题： <input id="EvenTitle" class="easyui-textbox" name="even.title" data-options="iconCls:'icon-search'"></br>
    事件内容： <input id="EvenCentent" class="easyui-textbox" name="even.centent" data-options="iconCls:'icon-search'" ></br>
    开始时间： <input id="EvenStart" class="easyui-datetimebox" name="even.start" data-options="required:true" ></br>
    结束时间： <input id="EvenEnd" class="easyui-datetimebox" name="even.end" data-options="required:true "></br>




</div>

</body>
</html>
